<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-22 11:12:05
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-29 10:55:03
-->
<template>
  <x-sub-page :content="title" @goBack="goBack" class="resetPwd-panel">
    <el-form
      class="user-form"
      :model="userForm"
      ref="ruleFormRef"
      :rules="rules"
      label-position="top"
      @submit.native.prevent
    >
      <el-form-item :label="'原密码'" prop="oldPwd">
        <el-input
          v-model="userForm.oldPwd"
          auto-complete="off"
          :placeholder="'请输入原密码'"
          type="password"
          @keyup.enter.native="onSubmit()"
        />
      </el-form-item>
      <el-form-item :label="'新密码'" prop="newPwd">
        <el-input
          v-model="userForm.newPwd"
          auto-complete="off"
          :placeholder="'请输入新密码'"
          type="password"
          @keyup.enter.native="onSubmit()"
        />
      </el-form-item>
      <el-form-item :label="'确认密码'" prop="password">
        <el-input
          v-model="userForm.password"
          auto-complete="off"
          :placeholder="'请确认新的密码'"
          type="password"
          @keyup.enter.native="onSubmit()"
        />
      </el-form-item>
      <el-form-item label-width="76px">
        <el-button type="primary" :loading="loading" size="medium" style="width: 100%" @click.prevent="onSubmit()">
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </x-sub-page>
</template>
<script>
  import { throttle, checkPwd, encrypt } from '@package/utils'
  import { mapState } from 'pinia'
  import { EnumApiCode } from '../../../../../../globalEnum.js'
  import { apiPutChangePwd } from '../api'
  import { pinias } from '@/common/pinia'

  const { login } = pinias
  export default {
    name: 'ResetPwd',
    data() {
      return {
        title: '修改密码',
        userForm: {
          oldPwd: '',
          newPwd: '',
          password: ''
        },
        rules: {
          oldPwd: [
            { required: true, message: '请输入原密码', trigger: 'blur' },
            { validator: this.validatePwd, trigger: 'blur' }
          ],
          newPwd: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, max: 50, message: '长度在 8 到 20 个字符', trigger: 'blur' },
            { validator: this.validatePwd, trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请确认新的密码', trigger: 'blur' },
            { validator: this.validateConfimPwd, trigger: 'blur' }
          ]
        },
        loading: false
      }
    },
    computed: {
      ...mapState(login, ['user'])
    },
    methods: {
      /**
       * @param codeForm - 重设密码
       * 提交表单
       */
      onSubmit: throttle(function () {
        this.loading = true
        this.$refs.ruleFormRef.validate(async (valid, error) => {
          console.log(valid, error)
          if (valid) {
            this.loading = true
            const formData = new FormData()
            formData.append('oldPwd', encrypt(this.userForm.oldPwd))
            console.log('this.userForm.oldPwd: ', this.userForm.oldPwd)
            formData.append('password', encrypt(this.userForm.newPwd))
            console.log('this.userForm.newPwd: ', this.userForm.newPwd)
            // const param = {
            //   // userId: this.user.id,
            //   oldPwd: encrypt(this.userForm.oldPwd),
            //   password: encrypt(this.userForm.newPwd)
            // }
            try {
              const { code } = await apiPutChangePwd(formData)
              if (code === EnumApiCode.Success) {
                this.loading = false
                this.$refs.ruleFormRef.resetFields()
                this.$message.success('重置密码成功')
                // this.$router.push('/resetSuccess')
              }
            } catch (e) {
              this.loading = false
            }
          } else {
            this.getAuthCode()
            this.loading = false
          }
        })
      }, 1000),
      goBack() {
        this.$router.go(-1)
      },
      validatePwd(rule, value, callback) {
        if (value && value !== '' && !checkPwd(value)) {
          callback(new Error(this.$t('system.user.PasswordMode')))
        } else {
          callback()
        }
      },
      validateConfimPwd(rule, value, callback) {
        if (value && value !== '' && value !== this.userForm.newPwd) {
          callback(new Error(this.$t('login.confirmPwdTips')))
        } else {
          callback()
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .sub-containter {
    align-items: center;
    /* justify-content: center; */
    padding-top: 6%;
  }
  .el-form.user-form {
    width: 30%;
  }
</style>
